<template>
  <div class="app-container">
    <!-- 帮助引导 -->
    <guidance class="stepBtn" title="帮助引导" :list="helpList" />
    <div class="textCenter">
      <div id="tableBoxStep1" class="tableBox">
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="110px"
          @submit.native.prevent
        >
          <el-form-item label="保障名称" prop="securityName">
            <el-input
              v-model="formData.securityName"
              placeholder="请输入保障名称名称"
              show-word-limit
              maxlength="50"
              clearable
              :style="{ width: '100%' }"
            />
          </el-form-item>
          <el-form-item label="保障描述" prop="securityDesc">
            <el-input
              v-model="formData.securityDesc"
              type="textarea"
              :rows="3"
              maxlength="100"
              show-word-limit
              placeholder="请输入保障名称描述"
              :style="{ width: '100%' }"
            />
          </el-form-item>
          <el-form-item label="自动切换" style="text-align: left">
            <el-switch
              v-model="formData.systemStatus"
              disabled
              :active-value="1"
              :inactive-value="0"
            />

            <span
              class="tip"
            >仅展示状态，默认关闭，请配置完成后在监控页面手动开启。</span>
          </el-form-item>
          <el-form-item label="节点配置">
            <table id="table" border="1" cellspacing="0">
              <tr>
                <th>
                  主要节点
                  <el-select
                    v-model="important_nodes"
                    class="selectNode"
                    placeholder="请选择"
                    filterable
                    value-key="id"
                    @change="getNodeZy"
                  >
                    <el-option
                      v-for="item in zyNodeList"
                      :key="item.id"
                      :label="item.nodeIp + '   |    ' + item.nodeName"
                      :value="item"
                      :class="
                        item.nodeStatus == '1' ? 'successColor' : 'dangerColor'
                      "
                    />
                  </el-select>
                </th>
                <th>
                  保障节点
                  <el-select
                    v-model="guarantee_nodes"
                    class="selectNode"
                    placeholder="请选择"
                    filterable
                    value-key="id"
                    @change="getNodeBz"
                  >
                    <el-option
                      v-for="item in bzNodeList"
                      :key="item.id"
                      :label="item.nodeIp + '   |    ' + item.nodeName"
                      :value="item"
                      :class="
                        item.nodeStatus == '1' ? 'successColor' : 'dangerColor'
                      "
                    />
                  </el-select>
                </th>
              </tr>
              <tr>
                <td class="textLeft">
                  <div v-show="!important_nodes.nodeIp" class="tipBox">
                    请选择需要配置的节点
                  </div>
                  <el-form
                    v-show="important_nodes.nodeIp"
                    :model="important_nodes"
                    size="medium"
                    label-width="110px"
                  >
                    <el-form-item label="节点IP :" prop="nodeIp">
                      <div class="nodeFormBox">
                        {{ important_nodes.nodeIp }}
                      </div>
                      <div class="nodeFormBtnBox">
                        <el-tag
                          @click="testHttpCode(important_nodes, 'ping')"
                        >ping</el-tag>
                      </div>
                    </el-form-item>
                    <el-form-item label="客户端端口 :" prop="haPort">
                      <div class="nodeFormBox">
                        {{ important_nodes.nodePort }}
                      </div>
                      <div class="nodeFormBtnBox">
                        <el-tag
                          @click="testHttpCode(important_nodes)"
                        >连通测试</el-tag>
                      </div>
                    </el-form-item>
                    <el-form-item label="操作系统 :" prop="nodeSystem">
                      <div class="nodeFormBox">
                        {{ nodeSystemFormat(important_nodes.nodeSystem) }}
                      </div>
                      <div class="nodeFormBtnBox">
                        <span
                          v-if="important_nodes.nodeStatus == 1"
                          style="color: #67c23a"
                        >
                          <i class="el-icon-loading" />
                          在线</span>
                        <span v-else style="color: #f56c6c">
                          <i class="el-icon-error" />
                          离线</span>
                      </div>
                    </el-form-item>
                  </el-form>
                </td>
                <td class="textLeft">
                  <div v-show="!guarantee_nodes.nodeIp" class="tipBox">
                    请选择需要配置的节点
                  </div>
                  <el-form
                    v-show="guarantee_nodes.nodeIp"
                    :model="guarantee_nodes"
                    size="medium"
                    label-width="110px"
                  >
                    <el-form-item label="节点IP :" prop="nodeIp">
                      <div class="nodeFormBox">
                        {{ guarantee_nodes.nodeIp }}
                      </div>
                      <div class="nodeFormBtnBox">
                        <el-tag
                          @click="testHttpCode(guarantee_nodes, 'ping')"
                        >ping</el-tag>
                      </div>
                    </el-form-item>
                    <el-form-item label="客户端端口 :" prop="haPort">
                      <div class="nodeFormBox">
                        {{ guarantee_nodes.nodePort }}
                      </div>
                      <div class="nodeFormBtnBox">
                        <el-tag
                          @click="testHttpCode(guarantee_nodes)"
                        >连通测试</el-tag>
                      </div>
                    </el-form-item>
                    <el-form-item label="操作系统 :" prop="nodeSystem">
                      <div class="nodeFormBox">
                        {{ nodeSystemFormat(guarantee_nodes.nodeSystem) }}
                      </div>
                      <div class="nodeFormBtnBox">
                        <span
                          v-if="guarantee_nodes.nodeStatus == 1"
                          style="color: #67c23a"
                        >
                          <i class="el-icon-loading" />
                          在线</span>
                        <span v-else style="color: #f56c6c">
                          <i class="el-icon-error" />
                          离线</span>
                      </div>
                    </el-form-item>
                  </el-form>
                </td>
              </tr>
            </table>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="textCenter">
      <el-button size="small" type="primary" @click="next">下一步</el-button>
    </div>

    <span
      v-loading.fullscreen.lock="fullscreenLoading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      customClass="elLodingBox"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    />
  </div>
</template>

<script>
import {
  listHessNode,
  httpCode,
  httpCodePing,
  nodeListHessNode
} from '@/api/console/hessNode'
export default {
  props: {
    active: Number,
    formDatas: Object
  },
  data() {
    return {
      helpList: [
        {
          title: '1.节点配置页面指引',
          helpMsg: '节点配置页面指引'
        },
        {
          title: '2.提示找不到目录',
          helpMsg: '提示找不到目录'
        }
      ],
      // 是否通过页面的判断逻辑
      isTraverse: false,
      nodeVisible: false,
      // 主要节点
      important_nodes: {
        nodeIp: '',
        haPort: '',
        nodeSystem: ''
      },
      // 保障节点数据
      guarantee_nodes: {
        nodeIp: '',
        haPort: '',
        nodeSystem: ''
      },
      formData: {
        securityName: '',
        securityDesc: '',
        importantNodeId: '',
        importantNodeIp: '',
        securityNodeId: '',
        securityNodeIp: '',
        systemStatus: 0,
        // 保存操作系统数据
        system: {
          important: '',
          security: ''
        }
      },
      rules: {
        securityName: [
          {
            required: true,
            message: '请输入保障名称名称',
            trigger: 'blur'
          }
        ]
      },
      zyNodeList: [],
      bzNodeList: [],
      fullscreenLoading: false,
      important_nodes_item: '',
      guarantee_nodes_item: '',
      nodeSystem: [],
      // 增加复刻系统环境变量
      fkSysType: '',
      getNodeListFnTime: ''
    }
  },
  watch: {},
  created() {
    var vue = this
    new Promise((resolve) => {
      if (vue.$parent.pageTyle == 'edit') {
        vue.getNodeList(resolve)
      } else {
        vue.nodeListHessNode(resolve)
      }
      vue.getNodeListFn(resolve)
    }).then((resolve) => {
      if (this.formDatas.id) {
        this.initData()
      }
    })
    //  获取操作系统
    this.getDicts('sys_version').then((response) => {
      this.nodeSystem = response.data
    })
  },
  mounted() {},
  destroyed() {
    clearInterval(this.getNodeListFnTime)
  },
  methods: {
    getNodeListFn(resolve) {
      if (this.getNodeListFnTime) {
        clearInterval(this.getNodeListFnTime)
      }
      var vue = this
      this.getNodeListFnTime = setInterval(() => {
        if (vue.$parent.pageTyle == 'edit') {
          vue.getNodeList(resolve)
        } else {
          vue.nodeListHessNode(resolve)
        }
      }, 5000)
    },
    showNodeSelect() {
      this.nodeVisible = true
    },
    // 将formDatas（index基础页的传参） 的数据绑定 formData （本页运用的参数）
    initData() {
      this.formData.id = this.formDatas.id
      this.formData.securityName = this.formDatas.securityName
      this.formData.securityDesc = this.formDatas.securityDesc
      this.formData.importantNodeId = this.formDatas.importantNodeId
      this.formData.securityNodeId = this.formDatas.securityNodeId

      this.important_nodes = this.formDatas.securityService
      this.guarantee_nodes = this.formDatas.securityService

      this.formData.systemStatus = this.formDatas.systemStatus
      this.zyNodeList.map((item) => {
        if (item.id == this.formDatas.importantNodeId) {
          this.important_nodes = item
          this.formData.fkSysType = item.sysType
        }
      })
      this.bzNodeList.map((item) => {
        if (item.id == this.formDatas.securityNodeId) {
          this.guarantee_nodes = item
        }
      })
    },
    // 解析节点操作系统参数
    nodeSystemFormat(val) {
      let text = ''
      this.nodeSystem.map((item) => {
        if (item.dictValue == val) {
          text = item.dictLabel
        }
      })

      return text
    },
    // 获取节点数据 完整所有数据
    getNodeList(resolve) {
      listHessNode({
        pageNum: 1,
        pageSize: 2000
      }).then((response) => {
        this.zyNodeList = response.rows
        this.bzNodeList = response.rows
        response.rows.map((item) => {
          if (item.nodeIp == this.important_nodes.nodeIp) {
            this.important_nodes.nodeStatus = item.nodeStatus
          } else if (item.nodeIp == this.guarantee_nodes.nodeIp) {
            this.guarantee_nodes.nodeStatus = item.nodeStatus
          }
        })
        //         response.data.map((item) => {
        //           if (item.nodeType == 1) {
        //             this.zyNodeList.push(item);
        //           } else {
        //             this.bzNodeList.push(item);
        //           }
        //
        //         })
        resolve()
      })
    },
    // 过滤掉已经使用过的节点
    nodeListHessNode(resolve) {
      nodeListHessNode({
        pageNum: 1,
        pageSize: 2000
      }).then((response) => {
        this.zyNodeList = response.data
        this.bzNodeList = response.data
        response.data.map((item) => {
          if (item.nodeIp == this.important_nodes.nodeIp) {
            this.important_nodes.nodeStatus = item.nodeStatus
          } else if (item.nodeIp == this.guarantee_nodes.nodeIp) {
            this.guarantee_nodes.nodeStatus = item.nodeStatus
          }
        })
        resolve()
      })
    },
    // 获取主要节点
    getNodeZy(items) {
      this.getNode(items, 'zy')
    },
    // 获取保障节点
    getNodeBz(items) {
      this.getNode(items, 'bz')
    },
    // 获取选择节点
    getNode(item, type) {
      if (type == 'zy') {
        this.important_nodes = item
        this.formData.fkSysType = item.sysType
        // this.$emit('getDiskPathFn', item)
      } else {
        this.guarantee_nodes = item
      }
    },
    // 联通测试
    testHttpCode(rows, ping) {
      const url = ''
      if (!rows.nodeIp) {
        this.$message({
          message: '请选择节点',
          type: 'error'
        })
        return
      }
      this.fullscreenLoading = true

      if (ping) {
        httpCodePing({
          ip: rows.nodeIp
        })
          .then((response) => {
            this.fullscreenLoading = false
            if (response.data.status) {
              this.$message({
                message: 'IP地址网络连接通畅',
                type: 'success'
              })
            } else {
              this.$message({
                message: '节点-离线',
                type: 'error'
              })
            }
          })
          .catch((err) => {
            this.fullscreenLoading = false
          })
        return false
      }
      httpCode({
        ip: rows.nodeIp,
        port: rows.nodePort
      })
        .then((response) => {
          this.fullscreenLoading = false
          if (response.data.status) {
            this.$message({
              message: '节点-在线',
              type: 'success'
            })
          } else {
            this.$message({
              message: '节点-离线',
              type: 'error'
            })
          }
        })
        .catch((err) => {
          this.fullscreenLoading = false
        })
    },
    // 上一步
    backPage() {
      this.$emit('backPage')
    },
    // 处理页面数据
    async processingData() {
      var vue = this

      var isTraverse = await this.$refs['elForm'].validate((valid) => {
        if (!valid) {
          this.isTraverse = false
          return
        }
        // 下一步

        if (!this.important_nodes.nodeIp) {
          this.$message.error('错误，请选择主要节点')
          this.isTraverse = false
          return false
        }

        if (!this.guarantee_nodes.nodeIp) {
          this.$message.error('错误，请选择保障节点')
          this.isTraverse = false
          return false
        }

        if (this.important_nodes.nodeIp == this.guarantee_nodes.nodeIp) {
          this.$message.error('错误，请选择不同的主要和保障节点')
          this.isTraverse = false
          return false
        }

        vue.formData.importantNodeId = vue.important_nodes.id
        vue.formData.importantNodeIp = vue.important_nodes.nodeIp
        vue.formData.system.important = vue.important_nodes.nodeSystem
        vue.formData.securityNodeId = vue.guarantee_nodes.id
        vue.formData.securityNodeIp = vue.guarantee_nodes.nodeIp
        vue.formData.system.security = vue.guarantee_nodes.nodeSystem

        vue.formData.hessNodes = []
        this.zyNodeList.map((item) => {
          if (item.id == vue.formData.importantNodeId) {
            vue.formData.hessNodes.push(item)
          }
        })
        this.bzNodeList.map((item) => {
          if (item.id == vue.formData.securityNodeId) {
            vue.formData.hessNodes.push(item)
          }
        })
        this.isTraverse = true
      })
    },
    // 下一步
    next() {
      var vue = this
      this.processingData()
      if (this.isTraverse) {
        var isBingo = false
        if (
          this.important_nodes.vmType == 'Bingo' ||
          this.guarantee_nodes.vmType == 'Bingo'
        ) {
          isBingo = true
        }

        this.$emit('changeActive', 1, vue.formData, isBingo)
        return true
      }
    }
  }
}
</script>
<style>
.selectNode > .el-input--medium > .el-input__inner {
  background: #ffffff;
  margin-left: 5px;
  border: 0px;
}

#tableBoxStep1 .el-select {
  width: 180px;
}
</style>
<style lang="scss" scoped>
.app-container {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.tableBox {
  width: 1000px;
  margin: 0 auto;
}

.tableBox table {
  width: 100%;
  border-color: #dcdfe6;
  border: 1px solid #dcdfe6;
  border-collapse: collapse;
}

.tableBox table th {
  background-color: #f5f7fa;
  width: 50%;
}

.nodeFormBox {
  width: 200px;
}

.nodeFormBtnBox .el-tag {
  cursor: pointer;
}

.nodeFormBox,
.nodeFormBtnBox {
  display: inline-block;
}

.tipBox {
  color: gray;
  text-align: center;
  height: 108px;
  line-height: 108px;
}

#table {
  border: 1px solid;
  border-color: #d1e1f0;
}

#table td {
  border: 1px solid;
  border-color: #d1e1f0;
}

#table th {
  border: 1px solid;
  border-color: #d1e1f0;
}

.back {
  width: 68px;
}

.tip {
  color: #929292;
  margin-left: 16px;
}

.textCenter {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}
</style>
